

<template>
  <div class="card">
   {{data}}
  </div>
</template>
 
<script setup lang="ts">
import {inject} from "vue";
// 子组件注入父组件传的值
const data = inject('falg')
</script>
 
<style scoped lang='less'>
@border:#ccc;
.card{
    width: 300px;
    border: 1px solid @border;
    border-radius: 3px;
    &:hover{
        box-shadow:0 0 10px @border;
    }
 
    &-content{
        padding: 10px;
    }
    &-header{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @border;
    }
}
</style>
